<template>
    <ul class="xk_list">
        <li v-for="(item,index) in courses" :key="item.id" :class="{'xk_nmr':index%4===3}">
            <dl>
                <dt>
                    <a :href="classURL(item.id)" target="_blank">
                        <img :src="item.image" width="100%" :alt="item.title" :title="item.title">
                    </a>
                </dt>
                <dd>
                    <a :href="classURL(item.id)" :title="item.title" target="_blank">{{item.title}}</a>
                    <p>
                        <span>共有{{item.saleCount}}人在学</span>
                        <em>|</em>
                        <span class="orange">￥{{showItemPrice(item.price)}}</span>
                    </p>
                </dd>
            </dl>
        </li>

    </ul>
</template>

<script>
    export default {
        name:'CourseItems',
        props:{
            courses:{
                type:Array,
                default:function () {
                    return []
                }
            }
        },
        data:function () {
            return {
                xk_nmr:'xk_nmr'
            }
        },
        methods:{
            classURL:function (id) {
                return '/class-'+id
            },
            showItemPrice:function (price) {
                if(price==0){
                    return '免费'
                }
                return (price/100).toFixed(2)
            }
        }
    }

</script>

<style>
    .offcn_lits {
        font: 14px/28px 'microsoft yahei';
        color: #333;
        width: 1200px;
        margin: 10px auto;
    }

    .offcn_lits a {
        color: #999;
        font: 14px/28px 'microsoft yahei';
    }

    .offcn_lits a:hover {
        color: #ff4a00
    }

    .xk_list li dd a {
        font-size: 16px;
        font-family: "微软雅黑";
        color: #333;
        line-height: 46px;
        height: 46px;
        overflow: hidden;
        display: block;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
